<script setup>



let obj = [
    {
        imger: "/src/views/tb/imgs/书1.jpg",
        shuming: "我们的普世文明",
        zuozhe: "V.S.奈保尔"
    },
    {
        imger: "/src/views/tb/imgs/书2.jpg",
        shuming: "最底层的十亿人",
        zuozhe: "保罗·科利尔"
    },
    {
        imger: "/src/views/tb/imgs/书3.jpg",
        shuming: "白:国际文学奖",
        zuozhe: "陈允然绘"
    },
    {
        imger: "/src/views/tb/imgs/书4.jpg",
        shuming: "没有我们的世界",
        zuozhe: "艾伦·韦斯曼"
    },
    {
        imger: "/src/views/tb/imgs/书5.jpg",
        shuming: "生产性观众",
        zuozhe: "赖纳·温特"
    },
]
let obj2 = [
    {
        imger: "/src/views/tb/imgs/书6.jpg",
        shuming: "始于极限",
        zuozhe: "上野千鹤子"
    },
    {
        imger: "/src/views/tb/imgs/书7.jpg",
        shuming: "看不见的女性",
        zuozhe: "卡罗琳·克里亚多"
    },
    {
        imger: "/src/views/tb/imgs/书8.jpg",
        shuming: "唐诗寒武纪",
        zuozhe: "王晓磊"
    },
    {
        imger: "/src/views/tb/imgs/书9.jpg",
        shuming: "命运",
        zuozhe: "蔡崇达"
    },
    {
        imger: "/src/views/tb/imgs/书10.jpg",
        shuming: "美国式死亡",
        zuozhe: "杰西卡·米特福德"
    },
]


</script>

<template>
    <div>
        <img class="nuobeier" src="../imgs/诺贝尔文学(1).jpg">
        <!-- 新书快递模块 -->
        <div class="newbook">
            <!-- 新书快递模块----顶部导航栏 -->
            <div class="newbookdaohangtiao">
                <div class="xskd">浏览图书</div>

                <ul>
                    <li>
                        <router-link to="/quanbuyemian">全部</router-link>
                    </li>
                    <li>
                        <router-link to="/wenxue">文学</router-link>
                    </li>
                    <li><router-link to="/xiaoshuo">小说</router-link></li>
                    <li><a href="">历史文化</a></li>
                    <li><a href="">社会纪实</a></li>
                    <li><a href="">科学新知</a></li>
                    <li><a href="">艺术设计</a></li>
                    <li><a href="">商业经营</a></li>
                    <li><a href="">绘本漫画</a></li>
                    <li><a href="">更多>></a></li>
                </ul>
                <div class="hengxian"></div>
                <!-- 书--选项 -->
                <div class="Bigbox">
                    <div class="Dbook">
                        <div v-for="el in obj" class="book" >
                           <router-link to="/wenmin"> <img :src="el.imger" alt="" ></router-link>
                            <div class="pailie">
                                <div>{{el.shuming}}</div>
                                <div>{{el.zuozhe}}</div>
                            </div>
                        </div>
                    </div>
                    <div class="Dbook2">
                        <div v-for="el1 in obj2" class="book">
                            <img :src="el1.imger" alt="">
                            <div class="pailie">
                                <div>{{el1.shuming}}</div>
                                <div>{{el1.zuozhe}}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>

        <router-view></router-view>
    </div>

</template>

<style scoped>
.nuobeier {
    margin-top: 16px;
    margin-left: 250px;
}

/* 新书快递 */
.newbook {
    margin-top: -110px;
    margin-left: 250px;
}

/* 新书快递模块----顶部导航条 */
.newbookdaohangtiao {
    margin-top: 140px;
    width: 875px;
    height: 27px;
}

.xskd {
    font-size: 20px;
    font-weight: bolder;
}

.newbookdaohangtiao li {
    font-size: 13px;
    display: inline;
    list-style: none;
    margin: 60px 15px 15px 15px;
}

.newbookdaohangtiao a {
    text-decoration: none;
    color: rgb(0, 0, 0);
}

.newbookdaohangtiao a:hover {
    color: cornflowerblue;
}

.hengxian {
    margin-top: 5px;
    border-bottom: 1px solid rgb(223, 222, 222);
}

.Bigbox {
    margin-top: 10px;
    width: 1040px;
    height: 580px;
    background-color: rgb(240, 240, 240);
}

.Dbook {
    display: flex;
}

.book img {
    width: 134px;
    height: 178px;
    margin: 37px;
}

.pailie {
    margin-top: -30px;
    margin-left: 50px;
}

.Dbook2{
    display: flex;

}
</style>